<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 100px;background-color: rgb(48, 65, 86);border-radius: 5px;text-align: center; line-height: 100px;">
        <el-row>
          <el-col :span="4"> <img src="https://jiang115.oss-cn-chengdu.aliyuncs.com/logo.png" alt=""></el-col>
          <el-col :span="4" :offset="16" ><span>
            <el-row class="row-bg" justify="center" :gutter="5">
              <el-col :span="4" style="margin-top: 30px;" >
                <div class="grid-content ep-bg-purple"  />
                <el-dropdown>
                  <span class="el-dropdown-link" style="text-align: center;line-height: 40px">
                    <div class="grid-content ep-bg-purple-light" /><span style="color: aliceblue;">{{userName}}</span>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item ><router-link to="/basicinfo">商铺信息</router-link></el-dropdown-item>
                      <el-dropdown-item ><router-link to="/UpdatePwd">修改密码</router-link></el-dropdown-item>
                      <el-dropdown-item > <router-link to="/" @click.prevent="loginOut">退出</router-link></el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-col>
            <el-col :span="4"><div class="grid-content ep-bg-purple-light" /><span style="color: aliceblue;">{{roleName}}</span></el-col>
            <!-- <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-icon style="color: aliceblue;"><Setting /></el-icon></el-col> -->
            </el-row>
          </span></el-col>
        </el-row>
      </el-header>
      <el-container style="margin-top: 5px; ">
        <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: rgb(238, 241, 246); height: 90vh; border-radius: 5px;" >
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :value="false" ><el-icon ><Expand /></el-icon></el-radio-button>
            <el-radio-button :value="true"><el-icon ><Fold /></el-icon></el-radio-button>
          </el-radio-group>
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
            style="background-color: rgb(238, 241, 246);"
            router
            collapse-transition = "true"
          >
           <el-menu-item index="/home"  style="text-align: center;">
            <el-icon><DataBoard /></el-icon>
              <template #title>仪表板</template>
            </el-menu-item>
            <el-sub-menu index="1" style="text-align: center;">
              <template #title>
                <el-icon><Postcard /></el-icon>
                <span slot="title">商铺管理</span>
              </template>
              <el-menu-item index="/StoreInfo">信息修改</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2" style="text-align: center;">
              <template #title>
                <el-icon><Memo /></el-icon>
                <span slot="title"> 商品管理</span>
              </template>
              <el-menu-item index="/ProductInfo">商品信息</el-menu-item>
              <el-menu-item index="/InsertProduct">商品新增</el-menu-item>
              <el-menu-item index="/updateInfo">商品修改</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3" style="text-align: center;">
              <template #title>
                <el-icon><MoreFilled /></el-icon>
                <span slot="title">商品类型管理</span>
              </template>
              <el-menu-item index="/TypeInfo">类型管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4" style="text-align: center;">

                <template #title>
                <el-icon><Crop /></el-icon>
                <span slot="title">订单管理</span>
              </template>
              <el-menu-item index="/OrderInfo">订单信息</el-menu-item>
            </el-sub-menu>
             <el-menu-item index="/Comment">
              <el-icon><Star /></el-icon>
              <template #title>评论管理</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main :class="{'expanded': isCollapse}" style="height: 90vh; border-radius: 5px;background-color: rgb(238, 241, 246);margin-left: 2px;">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {

  name: 'MealMain',
  data() {
    return {
      isCollapse: false,
      roleName: localStorage.getItem('roleName'),
      userName: localStorage.getItem('userName'),
    }
  },
  methods: {
    loginOut(){
      localStorage.removeItem('token')
      localStorage.removeItem('storeId')
      localStorage.removeItem('roleId')
      localStorage.removeItem('roleName')
      localStorage.removeItem('userId')
      this.$router.push('/');
    },
    handleOpen(key,keyPath){
      console.log(key, keyPath)
    },
    handleClose(key,keyPath){
      console.log(key, keyPath)
    },
    toggleCollapse() {
    this.isCollapse = !this.isCollapse;
    },
    getUserInfo(){
      this.$axios.get('/user/user/getUserInfo').then(res => {
        console.log(res)
        this.userInfo = res.data.data
      })
    }
  },created() {

  }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.expanded {
  margin-left: 66px; /* 确保 el-main 在 el-aside 收起时有足够的空间 */
}
/*隐藏文字*/
  .el-menu--collapse  .el-submenu__title span{
    display: none;
  }
  /*隐藏 > */
  .el-menu--collapse  .el-submenu__title .el-submenu__icon-arrow{
    display: none;
  }

</style>
